<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p>{{msg | f1}}</p>
        <div v-bind:title="msg | f1">v-bind里面使用过滤器</div>

        <p>{{msg | f2}}</p>
        <p>{{msg | f3 | f4 | f5 | f6 }}</p> -->
<!-- 
        <p>{{msg | f7("你好")}}</p>
        <p>{{msg | f8("你好","萨瓦迪卡")}}</p> -->

        <p>{{msg | f2}}</p>

    </div>

    <div id="app2">
        <!-- <p>{{msg2 | f1}}</p> -->
        <!-- <p>{{msg2 | f2}}</p> -->
    </div>
</body>
<script>
    // 过滤器 分两种方式：
    // 1. 全局注册
    //   注意：必须写在 new Vue之前
    // 2. 局部注册


    // Vue.filter(过滤器名称，方法)
    // 方法：默认有一个形参，这个参数指的是 "管道" 前面的那个值

    // 过滤器的使用：通过 管道 -> |
    // 1. 在{{}} 里面可以用 过滤器  他的结果就是 过滤器的返回值
    // 2. 在v-bind 指令里面可以使用 过滤器
    // 注意：一般情况下，过滤器要返回值
    // 过滤器可以串联使用
    // 过虑器可以传值
    // 如果全局和局部过滤器名称一样 :局部过滤器 > 全局过滤器  就近原则

    Vue.filter("f1", function(text){
        console.log(text);
        // 根据实际情况书写业务
        return text+"hello"
    })
    Vue.filter("f2", function(text){
        console.log(text);
        return text+"全局"
    })


    let vm = new Vue({
        el:'#app',
        data:{
            msg:'好好学习，天天向上'
        },
        filters:{
            f2:function(text){
                return text +"局部"
            },
            f3(text){
                return text+"123"
            },
            f4(text){
                return text + "456"
            },
            f5(text){
                return text + "789"
            },
            f6(text){
                return text+"000"
            },
            f7(text,arg1){
                console.log(text,arg1);
                return text+arg1
            },
            f8(text,arg1,arg2){
                return text + arg1+arg2
            }
        }
    })


    let vm2 = new Vue({
        el:'#app2',
        data:{
            msg2:'hello'
        }
    })


</script>
</html>